<template>
  <div class="main-header">
    <Breadcrumb v-show="globalStore.breadcrumb" id="breadcrumb" />
  </div>
  <el-main>
    <router-view v-slot="{ Component, route }">
      <transition appear name="fade-transform" mode="out-in">
        <keep-alive :include="keepAliveName">
          <component :is="createComponentWrapper(Component, route)" v-if="isRouterShow" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>
  </el-main>
</template>

<script setup lang="ts">
import { ref, provide, h } from "vue";
import Breadcrumb from './components/Breadcrumb.vue'
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import { storeToRefs } from "pinia";
import { GlobalStore } from "@/stores";
const globalStore = GlobalStore();
// 刷新当前页面
const isRouterShow = ref(true);
const refreshCurrentPage = (val: boolean) => {
  isRouterShow.value = val;
};
const keepAliveStore = useKeepAliveStore();
const { keepAliveName } = storeToRefs(keepAliveStore);

// 解决详情页 keep-alive 问题
const wrapperMap = new Map();
function createComponentWrapper(component: any, route: any) {
  if (!component) return;
  const wrapperName = route.fullPath;
  let wrapper = wrapperMap.get(wrapperName);
  if (!wrapper) {
    wrapper = { name: wrapperName, render: () => h(component) };
    wrapperMap.set(wrapperName, wrapper);
  }
  return h(wrapper);
}
provide("refresh", refreshCurrentPage);
</script>

<style scoped lang="scss">
.el-main {
  box-sizing: border-box;
  overflow-x: scroll;
  max-height: calc(100vh - 130px);
  background-color: #fff;

  &::-webkit-scrollbar {
    background-color: #fff;
  }
}
</style>
